<script setup>
import { useRouter } from 'vue-router'
import { logoutService } from '@/api/admin';
import { useTokenStore } from '@/stores/token';
import { ElMessage } from 'element-plus';
import { ref } from 'vue'
import { memberListService } from '@/api/member';
import { coachListService } from '@/api/coach.js'
import { equipmentListService } from '@/api/equipment';
import { lessonListService } from '@/api/lesson.js'
//导入绘图工具
import * as echarts from 'echarts';
import {
    User,
    Bicycle,
    Reading,
    Tools,
    Avatar,
    HomeFilled
} from '@element-plus/icons-vue'

const router = useRouter();
const tokenStore = useTokenStore();
const logout = async () => {
    await logoutService();
    tokenStore.removeToken();
    router.push('/login')
    ElMessage.success("退出成功")
}

const isHome = ref(true)


const page = ref(1)//当前页
const pageSize = ref(10)//每页条数

const memberTotal = ref(10);
const coachTotal = ref(10);
const equipmentTotal = ref(10);
const lessonTotal = ref(10);

const memberList = async () => {
    let params = {
        page: page.value,
        pageSize: pageSize.value,
    }
    let result = await memberListService(params)
    //得到查询的总数
    memberTotal.value = result.data.total;
}
const coachList = async () => {
    let params = {
        page: page.value,
        pageSize: pageSize.value,
    }
    let result = await coachListService(params)
    //得到查询的总数
    coachTotal.value = result.data.total;
}
const equipmentList = async () => {
    let params = {
        page: page.value,
        pageSize: pageSize.value,
    }
    let result = await equipmentListService(params)
    //得到查询的总数
    equipmentTotal.value = result.data.total;
}
const lessonList = async () => {
    let params = {
        page: page.value,
        pageSize: pageSize.value,
    }
    let result = await lessonListService(params)
    //得到查询的总数
    lessonTotal.value = result.data.total;
}

memberList();
coachList();
equipmentList();
lessonList();

const chartDom = ref();
const initBie = async () => {
    let myChart = echarts.init(chartDom.value);
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '统计',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: memberTotal.value, name: '会员人数' },
                    { value: coachTotal.value, name: '教练人数' },
                    { value: equipmentTotal.value, name: '设备数量' },
                    { value: lessonTotal.value, name: '开设课程' }
                ]
            }
        ]
    };
    option && myChart.setOption(option);
}
const show = () => {
    memberList();
    coachList();
    equipmentList();
    lessonList();
    setTimeout(() => { initBie() }, 1000)
}
show();
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router
                :default-active="$route.path">

                <el-menu-item index="/admin" @click="isHome = true; show()">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>主页</span>
                </el-menu-item>

                <!-- 分隔符 -->
                <el-divider></el-divider>

                <el-menu-item index="/admin/member" @click="isHome = false">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>会员管理</span>
                </el-menu-item>

                <el-menu-item index="/admin/coach" @click="isHome = false">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>教练管理</span>
                </el-menu-item>

                <el-menu-item index="/admin/equipment" @click="isHome = false">
                    <el-icon>
                        <Bicycle />
                    </el-icon>
                    <span>器材管理</span>
                </el-menu-item>

                <el-menu-item index="/admin/lesson" @click="isHome = false">
                    <el-icon>
                        <Reading />
                    </el-icon>
                    <span>课程管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div></div>
                <div class="toolbar">
                    <el-icon :size="30" style="margin-right: 8px; margin-top: 1px">
                        <Avatar />
                    </el-icon>
                    <el-dropdown>
                        <el-icon :size="20">
                            <Tools />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="logout">
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <div style="height: 700px;border: 2px;">
                    <!-- 主页面内容 -->
                    <div v-if="isHome">
                        <el-card class="page-container">
                            <template #header>
                                <div class="header">
                                    <span><strong style=" font-size : 30px ">主页面</strong></span>
                                </div>
                            </template>
                            <div>公告：蚂蚁健身前端，试用中</div>
                            <div style="width: 50%;">
                                <div ref="chartDom" style="width: 100% ;height: 400px;">

                                </div>
                            </div>
                        </el-card>
                    </div>

                    <!-- 子路由内容 -->
                    <RouterView v-else></RouterView>
                </div>

            </el-main>
            <!-- 底部区域 -->
            <el-footer>蚂蚁健身 ©2023 Created by wxk|ntdd</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.el-row {
    text-justify: center;
    text-align: center;
}

.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #232323;

        &__logo {
            height: 140px;
            background: url('@/assets/logo.png') no-repeat center / 180px auto;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #68b2e4d5;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .toolbar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>